<template>
  <!-- video -->
  <div class="playlist-item-box">
    <div class="playlist-mv-cover" @click="clickVideo(item.vid)">
      <span class="playCount">
        <i class="iconfont">&#xec46;</i>
        {{ item | showCount }}
      </span>
      <a href="javascript:;">
        <img class="playlist-mv-pic" :src="item.coverUrl" :alt="item.title" />
        <i class="mod-cover-mark"></i>
        <i class="mod-cover-icon-play"></i>
      </a>
    </div>
    <h4 class="playlist-title">
      <a
        href="javascript:;"
        class="playlist-title-txt"
        :title="item.title"
        @click="clickVideo(item.vid)"
      >
        {{ item.title }}
      </a>
    </h4>
    <div class="video-list-time" v-if="showTime">
      {{ item.durationms | changeTime }}
    </div>
    <h4 class="playlist-creator">
      by
      <a
        v-for="(creator, n) in item.creator"
        :key="n"
        href="javascript:;"
        :title="creator.userName"
        @click="clickUser(creator.userId)"
      >
        <i v-if="n > 0"> / </i>
        {{ creator.userName }}
      </a>
    </h4>
  </div>
</template>

<script>
import { changeTime } from "common/time.js";
import { shortCount } from "common/count";

export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    showTime: {
      type: Boolean,
      default() {
        return true;
      },
    },
  },
  data() {
    return {};
  },
  mounted() {
    // console.log(this.item);
  },
  filters: {
    // 将毫秒数转换为时分秒
    changeTime(time) {
      return changeTime(time);
    },
    showCount(item) {
      let count;
      if (item.playCount) {
        count = item.playCount;
      } else {
        count = item.playTime;
      }
      return shortCount(count);
    },
  },
  methods: {
    clickUser(id) {
      this.playUserDetail(id);
    },
    clickVideo(id) {
      this.playVideo(id);
      // document.documentElement.scrollTo({ top: 141, behavior: "smooth" });
      // console.log(id);
      // this.playSong(1924578028);
    },
  },
};
</script>

<style>
.video-list-time {
  font-size: 14px;
  color: #999;
}
</style>